//
// DISCLAIMER:
// Do not change this file because it is core styling.
// Customizing core files will make updating Atlas much more difficult in the future.
// To customize any core styling, copy the part you want to customize to styles/web/sass/app/ so the core styling is overwritten.
//

/* ==========================================================================
   Buttons

   Default Bootstrap and Mendix Buttons
========================================================================== */

.btn,
.mx-button {
    display: inline-block;
    margin-bottom: 0;
    padding: 0.6em 1em;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
    color: $btn-default-color;
    border: 1px solid transparent;
    border-radius: $btn-border-radius;
    background-color: $btn-default-bg;
    background-image: none;
    box-shadow: none;
    text-shadow: none;
    font-size: $btn-font-size;
    line-height: $line-height-base;

    &:hover,
    &:focus,
    &:active,
    &:active:focus {
        outline: none;
        box-shadow: none;
    }

    @if $btn-bordered != false {
        @extend .btn-bordered;
    }
}

// Mendix button link
.mx-link {
    padding: 0;
    color: $link-color;
}

// Images and icons in buttons
.btn,
.mx-button,
.mx-link {
    img {
        //height: auto; // MXUI override who set the height on 16px default
        height: $font-size-default + 4px;
        margin-right: 5px;
        vertical-align: text-top;
    }
}

//== Phone specific
//-------------------------------------------------------------------------------------------------------------------//
.profile-phone {
    .btn,
    .mx-link {
        &:active {
            -webkit-transform: translateY(1px);
            transform: translateY(1px);
        }
    }
}